<template>
  <div class="breadcrumbList">
    <div class="leftMoveBtn moveBtn" @click="move('left')">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div class="breadcrumbContent" id="breadcrumbContent">
      <el-breadcrumb class="app-breadcrumb" id="app-breadcrumb" separator="">
        <transition-group name="breadcrumb" class="item">
          <el-breadcrumb-item :class="item.path === $route.path ? 'chooseBreadcrumbItem' : ''"
            v-for="(item, index) in levelList" :key="item.path">
            <span v-if="item.path === $route.path" class="no-redirect btn">{{ item.meta.title }}</span>
            <a class="btn" v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
            <i v-if="item.path !== '/earlyWarningCenter'" class="close el-icon-close no-redirect"
              @click.prevent="closeLink(item)"></i>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
    <div class="rightMoveBtn moveBtn" @click="move('right')">
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>

<script>
import pathToRegexp from 'path-to-regexp'

export default {
  data() {
    return {
      levelList: []
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let { path } = this.$route;
      if (!this.levelList.find(e => e.path == path)) {
        this.levelList.push(this.$route);
      };
      this.levelList = this.levelList.filter(e => e.path !== '/earlyWarningCenter')
      this.levelList.unshift({
        path: '/earlyWarningCenter',
        name: "earlyWarningCenter",
        meta: { title: "预警中心" }
      });
      console.log(this.levelList);
    },
    nextRouter(flag) {
      let { path } = this.$route;
      const index = this.levelList.findIndex(e => e.path == path);
      // 初始化左边和右边的元素为undefined  
      let left = undefined;
      let right = undefined;

      // 检查索引是否有效，并获取左边和右边的元素  
      if (index > -1) {
        if (index > 0) {
          left = this.levelList[index - 1];
        }
        if (index < this.levelList.length - 1) {
          right = this.levelList[index + 1];
        }
      }
      if (flag == 'left' && left) {
        this.handleLink(left);
      } else if (flag == 'right' && right) {
        this.handleLink(right);
      }
    },
    move(flag) {
      let breadcrumbContent = document.getElementById('breadcrumbContent');
      let appBreadcrumb = document.getElementById('app-breadcrumb');
      let breadcrumbContent_w = breadcrumbContent.clientWidth;
      let appBreadcrumb_w = appBreadcrumb.clientWidth;
      let breadcrumbItemList = document.querySelectorAll('.el-breadcrumb__item')
      let appBreadcrumb_l = appBreadcrumb.offsetLeft;
      console.log('appBreadcrumb_l', appBreadcrumb_l)
      if (breadcrumbContent_w >= appBreadcrumb_w) {
        appBreadcrumb.style.left = 0;
        return
      }
      let moveLength = 0;
      let domList = Array.from(breadcrumbItemList);
      if (flag == 'left') {
        domList.reverse();
        let moveItem = domList.find(e => (e.offsetLeft + appBreadcrumb.offsetLeft) <= 0);
        console.log(moveItem)
        this.getElementsAfter(Array.from(breadcrumbItemList), moveItem, flag).forEach(e => {
          moveLength += e.clientWidth;
        });
        console.log(this.getElementsAfter(Array.from(breadcrumbItemList), moveItem, flag))
        // appBreadcrumb.style.right = 'auto';
        appBreadcrumb.style.removeProperty('right');
        appBreadcrumb.style.left = -moveLength + 'px';
      } else if (flag == 'right') {
        let moveItem = domList.find(e => (e.offsetLeft + appBreadcrumb.offsetLeft + e.clientWidth) >= breadcrumbContent_w);
        moveLength = 0;
        this.getElementsAfter(domList, moveItem, flag).forEach(e => {
          moveLength += e.clientWidth;
        });
        appBreadcrumb.style.removeProperty('left');
        appBreadcrumb.style.right = -moveLength + 'px';
      }
    },
    getElementsAfter(array, dom, flag) {
      // 找到目标元素的索引  
      const targetIndex = array.findIndex(e => e == dom);
      // 如果找到了目标元素，返回它之后的所有元素  
      if (targetIndex !== -1) {
        if (flag == 'left') {
          return array.slice(0, targetIndex);
        } else {
          return array.slice(targetIndex + 1);
        }
      } else {
        // 如果没有找到目标元素，返回一个空数组  
        return [];
      }
    },
    closeLink(item) {
      let { path } = item;
      if (path == '/earlyWarningCenter') return;
      let index = this.levelList.findIndex(e => e.path == path);
      if (path !== this.$route.path) {
        if (index + 1 < this.levelList.length) {
          this.handleLink(this.levelList[index + 1])
        } else {
          this.handleLink(this.levelList[index - 1])
        }
      }

      this.levelList = this.levelList.filter(e => e.path !== path);
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
    },
    pathCompile(path) {
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumbList {
  width: 100%;
  height: 100%;
  width: calc(100% - 50px);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .moveBtn {
    width: 50px;
    text-align: center;
    cursor: pointer;

    &:hover {
      color: #4582d2;
    }
  }

  .breadcrumbContent {
    width: calc(100% - 100px);
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}

.app-breadcrumb {
  position: absolute;
  height: 100%;
  transition: all 0.3s;

  &>.item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: max-content;
  }

  .el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;

    .no-redirect {
      color: #4582d2;
      cursor: text;
    }
  }
}

::v-deep .el-breadcrumb__item {
  height: 100%;
  background-color: #ffffff;
  padding: 0 15px;
  border-left: 1px solid #f0f0f0;

  .el-breadcrumb__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .btn {
    display: inline-block;
    line-height: 50px;
    cursor: pointer !important;
  }

  .close {
    margin-left: 10px;
    cursor: pointer !important;
  }
}

.chooseBreadcrumbItem {
  background-color: #f0f0f0;
}

::v-deep .el-breadcrumb__separator {
  display: none;
}
</style>
